<template>
	<view class="wish-detail">
		<msg-queue :msgs="msgList"></msg-queue>
		<image src="/static/logo.png" mode="aspectFill" class="top-logo"></image>
		<image src="/static/wish-detail-bg.png" mode="widthFix" class="detail-bg"></image>
		<text class="rule-btn" @click="showRule=true">查看规则</text>
		<view class="wish-box">
			<user-avatar class="header-user-img" size="120" :src="wishInfo.avatar_url" />
			<image src="/static/wish-support.png" mode="aspectFill" class="has-support-icon" v-if="wishInfo.i_had_support===1"></image>
			<view class="header-title">
				{{wishInfo.nick_name}} <gender :value="wishInfo.gender"></gender>
			</view>
			<view class="header-desc">
				我在心愿圈发起了一个好物心愿
			</view>
			<image :src="wishInfo.goods_img_url" mode="aspectFill" class="header-good-img" @click="onGoodClick"></image>
			<text  class="header-good-name text-ellipsis-3" @click="onGoodClick">{{wishInfo.goods_name}}</text>
			<view class="join-avatar-list">
				<view class="join-avatar-item" v-for="(item,index) in joinAvatars" :key="index">
					<view class="join-dian" v-if="item==='dian'">...</view>
					<image :src="item" class="join-avatar" mode="aspectFill" v-else-if="item"></image>
					<image src="/static/will-avatar.png" class="join-avatar" mode="aspectFill" v-else></image>
				</view>
			</view>
			<view class="wish-status-wrap">
				<view class="wish-status-title red-text" v-if="isCancel">
					{{isMe?'你':'TA'}}已取消该心愿 <text class="iconfont icon-wenhao" @click="onWenhaoClick"></text>
				</view>
				<view class="wish-status-title" v-else-if="shortNum>0">
					{{isMe?'仅':'还'}}差<text class="red-text">{{shortNum}}人</text>支持，{{isMe?'你':'TA'}}即可获得该好物 <text class="iconfont icon-wenhao" @click="onWenhaoClick"></text>
				</view>
				<view class="wish-status-title" v-else-if="wishInfo.need_people>0&&shortNum===0">支持人数<text class="red-text">已达标</text>，{{isMe?'你':'TA'}}已获得该好物 <text class="iconfont icon-wenhao" @click="onWenhaoClick"></text></view>
			</view>
			<view class="wish-status-box" v-if="!isCancel">
				<!-- <view>
					<view class="progress-title">
						<text class="progress-blank" :style="{width:progressValue*100+'%'}"></text>
						<view class="progress-value-box" :class="{reverse:progressValue>0.9}"><image class="arrow-down" src="/static/arrow-down.png" mode="aspectFill"></image><text class="progress-value">{{wishInfo.join_people}}/{{wishInfo.need_people}}</text></view>
					</view>
					<wish-progress :value="progressValue" height="30"  bg="#FFF4D5" radius="20" v-if="wishInfo.need_people"></wish-progress>
				</view> -->
				<view class="support-list" v-if="joinList.length>0">
					<view class="support-item" v-for="item in joinList" :key="item.user_id">
						<user-avatar class="support-user-img" :src="item.avatar_url" />
						<view class="support-info">
							<view class="support-user-name">
								<text class="name-text">{{item.nick_name}}</text>
								<text class="support-time">{{item.create_time}}</text>
							</view>
							<view class="support-content">
								<text class="first-tag" v-if="item.is_frst">首次专享</text>支持{{isMe?'你':'了TA'}}并获得<text class="red-text">{{item.get_gold_num}}心愿值</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="will-operate" v-if="isMe">
			<text class="wish-number" @click="onCopy">心愿编号：XYQ{{groupId}} <text class="iconfont icon-copy"></text></text>
			<template v-if="!isCancel">
				<text class="cancel-btn" @click="onCancelClick" v-if="shortNum>0">取消心愿</text>
				<text class="check-btn" @click="showPopup('checkPopup')" v-else>查看物流</text>
			</template>
		</view>
		<view class="operate-box">
			<button class="operate-btn" type="primary" @click="onSupportClick" v-if="wishInfo.can_support===1">{{wishInfo.button_info[isMe?'button_share':'button_support']}}</button>
			<button class="operate-btn" type="primary" @click="onGoNew" v-else>{{wishInfo.button_info[isMe?'button_initiate':'button_i_initiate']}}</button>
			<tool-tip class="free-tip" v-if="isFreeSupport||(isMe&&isFree&&shortNum>0)"><rich-text :nodes="bubbleTip"></rich-text></tool-tip>
		</view>
		<view class="will-intro-box">
			<image :src="wishInfo.wish_introduce_long_img_url" class="will-intro-img"  mode="widthFix"></image>
		</view>
		<uni-popup ref="cancelPopup" type="center" :showClose="false">
			<view class="confirm-cancel-popup">
				<view class="popup-content">
					取消后其他人将无法继续支持你的这个心愿，确认取消？
				</view>
				<view class="popup-footer">
					<view class="primary-btn" @click="closePopup('cancelPopup')">返回</view>
					<button class="border-btn" @click="confirmCancel">确认取消</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="checkPopup" type="center" >
			<view class="check-popup">
				<view class="popup-title">物流详情</view>
				<view class="popup-content" v-if="logisticsInfo">
					<view>承运方：{{logisticsInfo.post_company_name}}</view>
					<view>快递单号：{{logisticsInfo.post_order}}</view>
				</view>
				<view class="popup-no-content" v-else>
					<view>暂无快递信息，管理员将尽快安排发货，请耐心等待</view>
				</view>
				<view class="popup-footer">
					<button open-type="contact" class="border-btn">联系客服</button>
					<view class="primary-btn" @click="copy" v-if="logisticsInfo">复制快递单号</view>
				</view>
			</view>
		</uni-popup>
		<share-popup :groupId="groupId" @init="initShareInfo" :visible.sync="sharePopupVisible"></share-popup>
		<!-- 单个支持弹窗 -->
		<single-support ref="single" @success="onSupportSuccess" isTopOffset></single-support>
		<login-popup :visible.sync="showLogin" @success="onLoginSuccess"/>
		<wish-detail-popup ref="detail" :isFree="isFree" />
		<confirm-popup :visible.sync="disableCancelVisible" content="该心愿已经开始得到好友支持了，得到支持的心愿无法取消哦" :showCancel="false" confirmText="我知道了"></confirm-popup>
		<confirm-popup :visible.sync="showRule" popupClass="rule-popup" title="规则" showClose :showCancel="false" :showConfirm="false">
			<scroll-view scroll-y class="rule-popup-content">
				<image :src="ruleImg" mode="widthFix" class="rule-img"></image>
			</scroll-view>
		</confirm-popup>
		<new-guy-popup isTopOffset requestUrl="getWishNewPopupInfo" name="welfare" :requestData="{group_id:groupId}"></new-guy-popup>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import ConfirmPopup from '@/components/confirm-popup.vue'
	import UserAvatar from '@/components/user/avatar.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import SharePopup from '@/components/share-popup.vue'
	import SingleSupport from '@/components/popups/single-support-popup.vue'
	import WishProgress from '@/components/wish-progress.vue'
	import Gender from '@/components/user/gender.vue'
	import WishDetailPopup from '@/components/popups/wish-detail-popup.vue'
	import LoginPopup from '@/components/login-popup.vue'
	import NewGuyPopup from '@/components/popups/new-guy-popup.vue'
	import MsgQueue from '@/components/msg-queue.vue'
	// #ifdef MP-WEIXIN
	import ShareMixin from '@/mixins/share-mixin.js'
	// #endif
	export default {
		// #ifdef MP-WEIXIN
		mixins: [ShareMixin],
		// #endif
		components:{
			ConfirmPopup,
			uniPopup,
			SharePopup,
			NewGuyPopup,
			SingleSupport,
			UserAvatar,
			WishProgress,
			Gender,
			LoginPopup,
			WishDetailPopup,
			MsgQueue
		},
		async onLoad(data){
			this.groupId=data.group_id
			this.fromIndex=data.index
			this.fromChildIndex=data.childIndex
			await this.getWishDetail()
			this.getRule()
			this.getMarqueue()
		},
		data() {
			return {
				topShareInfo:{
					share_title:'',
					path:'',
					share_img:''
				},
				isMe:false, // 是否自己的心愿
				isCancel:false,
				wishInfo:{
					nick_name:'',
					join_people:0,
					need_people:0
				},
				groupId:'',
				joinList:[],
				msgList:[],
				sharePopupVisible:false,
				disableCancelVisible:false,
				ruleImg:'',
				showRule:false,
				logisticsInfo:'',
				fromIndex:'',
				fromChildIndex:'',
				showLogin:false,
				isFreeSupport:false, // 是否能免费支持
				isFree:false, // 是否免费心愿
				bubbleTip:''
			}
		},
		computed:{
			shortNum(){
				if(!this.wishInfo.need_people){
					return 0
				}else{
					return this.wishInfo.need_people-this.wishInfo.join_people
				}
			},
			progressValue(){
				if(!this.wishInfo.need_people){
					return 0
				}else{
					return this.wishInfo.join_people/this.wishInfo.need_people
				}
			},
			joinAvatars(){
				if(!this.wishInfo.need_people){
					return []
				}else{
					let num=this.wishInfo.need_people>5?5:this.wishInfo.need_people
					let joinList=[...this.joinList].reverse()
					let arr=[]
					for(let i=0;i<num;i++){
						let item=joinList[i]
						item=item?item.avatar_url:''
						if(this.wishInfo.need_people>5&&i===3){
							item='dian'
						}
						arr.push(item)
					}
					return arr
				}
			},
			...mapGetters([
				'hasBind',
				'userInfo'
			])
		},
		methods:{
			async getWishDetail(){
				let data =await this.$api.getWishDetail({group_id:this.groupId})
				let wishInfo=data.wish_info
				this.joinList=data.join_info
				if(data.logistics_info&&data.logistics_info[0]){
					this.logisticsInfo=data.logistics_info[0]
				}
				wishInfo.group_id=this.groupId
				this.wishInfo=wishInfo
				this.isMe=wishInfo.is_me===1
				this.isCancel=wishInfo.group_state===4||wishInfo.group_state===5
				this.isFreeSupport=wishInfo.can_free_support===1
				this.isFree=wishInfo.is_free===1
				this.topShareInfo=wishInfo.share_info.wx_friend_share_info
				this.bubbleTip=wishInfo.button_info[this.isMe?'wish_detail_bubble_tips':'wish_detail_button_bubble_tips']
				let path=`/pages/wish/detail?group_id=${this.groupId}`
				if(this.userInfo.refer_code){
					path+=`&refer_code=${this.userInfo.refer_code}`
				}
				this.topShareInfo.path=path
				if(this.wishInfo.nick_name.length<=5){
					uni.setNavigationBarTitle({
						title:this.wishInfo.nick_name+'的好物心愿'
					})
				}
			},
			showPopup(type){
				this.$refs[type].open()
			},
			closePopup(type){
				this.$refs[type].close()
			},
			onCancelClick(){
				if(this.wishInfo.join_people>0){
					this.disableCancelVisible=true
				}else{
					this.showPopup('cancelPopup')
				}
			},
			onLoginSuccess(){
				this.onSupportClick()
			},
			async onSupportSuccess(){
				await this.getWishDetail()
				this.reportFrom()
			},
			async confirmCancel(){
				await this.$api.cancelWish({group_id:this.groupId})
				uni.showToast({
					icon:'none',
					title:'取消成功'
				})
				this.closePopup('cancelPopup')
				setTimeout(async()=>{
					await this.getWishDetail()
					this.reportFrom()
				},800)
			},
			reportFrom(){
				if(this.fromIndex){
					console.log('触发emit',{wish:this.wishInfo,index:+this.fromIndex,childIndex:+this.fromChildIndex})
					uni.$emit('refreshSingle',{wish:this.wishInfo,index:+this.fromIndex,childIndex:+this.fromChildIndex})
				}else{
					uni.$emit('refreshSingle',{wish:this.wishInfo})
				}
			},
			copy(){
				uni.setClipboardData({
					data:this.logisticsInfo.post_order,
					success:()=>{
						uni.showToast({
							title:'复制成功'
						})
					}
				})
			},
			async onSupportClick(){
				if(this.isMe){
					this.sharePopupVisible=true
				}else{
					if(!this.hasBind){
						this.showLogin=true
					}else{
						this.$refs.single.open({wish:this.wishInfo})
					}
				}
			},
			async getRule(){
				let data = await this.$api.getExchangeRule({},{loading:false})
				this.ruleImg=data.img
			},
			onWenhaoClick(){
				this.$refs.detail.open({info:this.wishInfo})
			},
			onCopy(){
				uni.setClipboardData({
				    data: 'XYQ'+this.groupId,
				    success: function () {
				        uni.showToast({
				        	icon:'none',
							title:'心愿编号复制成功'
				        })
				    }
				})
			},
			onGoNew(){
				uni.switchTab({
					url:'/pages/exchange/exchange'
				})
			},
			onGoodClick(){
				uni.navigateTo({
					url:`/pages/product/product-detail?goods_id=${this.wishInfo.goods_id}`
				})
			},
			async getMarqueue(){
				let data = await this.$api.getWishMarqueue({goods_id:this.wishInfo.goods_id},{loading:false})
				this.msgList=data
			}
		}
	}
</script>

<style lang="scss">
	.wish-detail{
		position: relative;
		padding:120rpx 40rpx 0;
		padding-bottom: calc(140rpx + var(--safe-area-inset-bottom));
		background:#FFE392;
	}
	
	.top-logo{
		position: absolute;
		top:25rpx;
		left: 30rpx;
		width: 146rpx;
		height: 50rpx;
		z-index: 2;
	}
	.detail-bg{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: auto;
		z-index: 1;
	}
	.rule-btn{
		position: absolute;
		right: 0;
		top:20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 136rpx;
		height: 50rpx;
		font-size: 24rpx;
		color: #666;
		border-radius:100px 0px 0px 100px;
		background:rgba(255,255,255,0.6);
		z-index: 2;
	}
	.wish-box{
		position: relative;
		text-align: center;
		padding: 52rpx 40rpx;
		background:rgba(255,255,255,1);
		border-radius:30rpx;
		z-index: 2;
		.header-user-img{
			position: absolute;
			top:-80rpx;
			left: calc(50% - 60rpx);
			border:3rpx solid #fff;
			border-radius: 100%;
			z-index: 1;
		}
		.has-support-icon{
			position: absolute;
			right: 5rpx;
			top:5rpx;
			width:120rpx;
			height:120rpx;
		}
		.header-title{
			font-size:28rpx;
			font-weight:600;
			color:#333;
		}
		.header-desc{
			margin:20rpx 0 30rpx;
			font-size:32rpx;
			font-weight:400;
			color:#666;
		}
		.header-good-img{
			width:240rpx;
			height:240rpx;
			border-radius:4rpx;
		}
		.header-good-name{
			margin: 14rpx auto 40rpx;
			max-width:240rpx;
			font-size:24rpx;
			color:#999;
			line-height: 32rpx;
		}
		.join-avatar-list{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;
		}
		.join-avatar-item{
			margin-right: -10rpx;
		}
		.join-avatar{
			display: block;
			width: 60rpx;
			height: 60rpx;
			border-radius: 60rpx;
			// border:1px solid #fff;
		}
		.join-dian{
			position: relative;
			width: 70rpx;
			height: 60rpx;
			top: -15rpx;
			font-size:48rpx;
			text-align: center;
			color:#d8d8d8;
		}
		.progress-title{
			display: flex;
			font-size:24rpx;
			color:#666;
		}
		.progress-blank{
			flex-grow:0;
			flex-shrink:1;
		}
		.progress-value-box{
			display: flex;
			align-items: center;
			flex-grow:0;
			flex-shrink:0;
			&.reverse{
				flex-direction:row-reverse;
				.arrow-down{
					margin-right: 0;
					margin-left: 8rpx;
				}
			}
		}
		.arrow-down{
			width: 24rpx;
			height: 24rpx;
			margin-right:8rpx;
			margin-left: -10rpx;
		}
	}
	.wish-status-wrap{
		display: flex;
		position: relative;
		align-items: center;
		justify-content: center;
	}
	.wish-status-title{
		position: relative;
		font-size: 36rpx;
		font-weight: 600;
		color:#333;
		.icon-wenhao{
			position: absolute;
			right: -40rpx;
			top:50%;
			transform: translateY(-50%);
			font-size: 36rpx;
			font-weight: normal;
			color:#bbb;
		}
	}
	.wish-status-box{
		border:none;
		background: #fff;
		margin-top: 24rpx;
	}
	.support-list{
		border-top:1rpx solid #D8D8D8;
		.support-item{
			margin-top:50rpx;
			display: flex;
			align-items: center;
		}
		.support-info{
			flex:1;
		}
		.support-user-img{
			margin-right: 20rpx;
		}
		.support-user-name{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 6rpx;
		}
		.name-text{
			font-size: 28rpx;
			font-weight: bold;
			color:#333;
		}
		.support-time{
			font-size: 20rpx;
			color:#999;
		}
		.support-content{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color:#666;
		}
		.first-tag{
			width:96rpx;
			height:30rpx;
			margin-right: 4rpx;
			font-size:20rpx;
			font-weight:600;
			text-align: center;
			color:rgba(255,255,255,1);
			background:rgba(231,64,74,1);
			border-radius:4px;
			line-height:30rpx;
		}
	}
	.will-intro-box{
		width: 100%;
		padding-top: 60rpx;
	}
	.will-intro-img{
		width: 100%;
	}
	.will-operate{
		margin-top:20rpx;
		display: flex;
		justify-content: space-between;
		font-size:24rpx;
		color:#999;
	}
	.wish-number{
		display: flex;
		align-items: center;
		.icon-copy{
			font-size: 24rpx;
		}
	}
	.check-btn{
		color:#333;
	}
	.operate-box{
		position: fixed;
		bottom:0rpx;
		left:0rpx;
		z-index: 5;
		padding:15rpx 30rpx;
		padding-bottom: calc(15rpx + var(--safe-area-inset-bottom));
		width:100%;
		background:#fff;
		.operate-btn{
			width:100%;
			height:90rpx;
			display: flex;
			align-items:center;
			justify-content: center;
			font-size:36rpx;
			font-weight: 600;
			color:#fff;
			background-color:rgba(231,64,74,1);
			border-radius:10rpx;
		}
	}
	.free-tip{
		position: absolute;
		bottom:calc(100% - 15rpx);
		right: 30rpx;
	}
	.confirm-cancel-popup,.check-popup{
		width: 580rpx;
		padding: 50rpx;
		background-color: #fff;
		border-radius: 10rpx;
		.popup-title{
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 40rpx;
			text-align: center;
		}
		.popup-content{
			font-size: 28rpx;
			text-align: center;
			margin-bottom: 30rpx;
			&>view{
				text-align: left;
				margin-bottom: 20rpx;
			}
		}
		.popup-no-content{
			font-size: 28rpx;
			margin-bottom: 30rpx;
			&>view{
				text-align: center;
				margin-bottom: 20rpx;
			}
		}
		.popup-footer{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.primary-btn,.border-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			flex:1;
			width:initial;
			height:80rpx;
			padding: 0;
			font-size:30rpx;
			color:#fff;
			border-radius:10rpx;
			border:1px solid #E7404A;
			background-color: #E7404A;
		}
		.primary-btn{
			margin-right: 60rpx;
		}
		.border-btn{
			border:none;
			background-color: #fff;
			color:#666;
		}
	}
	.check-popup .primary-btn{
		margin-left: 60rpx;
		margin-right: 0;
	}
	.red-text{
		color: #E7404A;
	}
	.rule-popup{
		padding: 30rpx 20rpx!important;
	}
	.rule-popup-content{
		max-height: 500rpx;
		overflow-y:auto;
	}
	.rule-img{
		display: block;
		width: 100%;
		max-width:100%;
	}
</style>
